<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>事件流</title>
    <style>
      #outer {
        position: absolute;
        width: 400px;
        height: 400px;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        background-color: deeppink;
      }

      #middle {
        position: absolute;
        width: 300px;
        height: 300px;
        top: 50%;
        left: 50%;
        margin-left: -150px;
        margin-top: -150px;
        background-color: deepskyblue;
      }

      #inner {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -50px;
        background-color: darkgreen;
        text-align: center;
        line-height: 100px;
        color: white;
      }

      #outer,
      #middle,
      #inner {
        border-radius: 100%;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="middle">
        <div id="inner">click me!</div>
      </div>
    </div>
    <script>
      /**
       * 事件流思路：
       * 事件捕获阶段就是当事件触发时，先从DOM树顶层开始进行事件捕获，直到事件触发到达了事件源元素。
       * 事件冒泡阶段是，该事件会随着DOM树的层级路径，由子节点向父节点进行层层传递，直至到达document。
       *
       * 事件流模分为三个阶段：捕获阶段、处于目标阶段、冒泡阶段
       * 捕获阶段：从Dom树顶层---> 源元素；如：document-->html-->body-->div
       * 冒泡阶段：从子节点 ---> 父节点(document)；如：div-->body-->html-->document
       * 阻止事件冒泡: event.stopPropagation()
       * */
      var innerCircle = document.getElementById("inner");
      innerCircle.onclick = function () {
        alert("innerCircle");
      };

      event.stopPropagation(); //阻止事件传播

      var middleCircle = document.getElementById("middle");
      middleCircle.onclick = function () {
        alert("middleCircle");
      };

      var outerCircle = document.getElementById("outer");
      outerCircle.onclick = function () {
        alert("outerCircle");
      };
    </script>
  </body>
</html>
